<template>
  <div class="content">
    <div class="content-header">
      2019春夏订货会
    </div>
    <div class="input-content">
      <div class="input-div border-bottom">
        <div class="input-text-div">
          <span class="input-text">登录名</span>
        </div>
        <div class="input-box">
          <input type="text" class="input" placeholder="输入登录名"/>
        </div>
      </div>
      <div class="input-div">
        <div class="input-text-div">
          <span class="input-text">密码</span>
        </div>
        <div class="input-box">
          <input type="password" class="input" placeholder="输入密码"/>
        </div>
      </div>
    </div>
    <div class="login-btn">
      <button type="button" class="exitBtn">退出</button>
      <button type="button" class="loginBtn">登陆</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Content'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.content-header
  line-height: $headerHeight
  background: #fff
  text-align: center
  font-size: .42rem
  font-weight: bold
.input-content
  height: 2.12rem
  background: #fff
  margin-top: .7rem
  padding-left: .55rem
  .input-div
    height: 1.04rem
    width: 100%
    display: flex
    .input-text-div
      width: 1.3rem
      font-size: $headerFontSize
      .input-text
        font-size: $headerFontSize
        line-height: 1.04rem
    .input-box
      flex: 1
      padding-left: 1.05rem
      .input
        width: 100%
        height: 100%
        font-size: $headerFontSize
        color: #ccc
.login-btn
  width: 6.9rem
  height: .98rem
  margin: .7rem auto
  .exitBtn
    width: 3.3rem
    height: .98rem
    font-size: $headerFontSize
    color: #fff
    background: $redBtn
    border-radius: .1rem
  .loginBtn
    width: 3.3rem
    height: .98rem
    font-size: $headerFontSize
    color: #fff
    background: $greenBtn
    border-radius: .1rem
    margin-left: .2rem
</style>
